<template>
	<view>
		<view class="box-ly-pm" :style="style_box">
			<view class="dot" :class="'dot-'+(index+1)" v-for="(item,index) in dotList" :key="index"></view>
			<view class="box-in" :style="style_box_in">

				<view class="ct-out d-c d-c-c" :class="['award-'+(index+1),index==indexSelect?'awardSelect':'']"
					v-for="(item,index) in list" :key="index"
					:style="[{'background-image':'url('+(is_img_bg?item.img_bg:'')+')'},{'box-shadow': '0 14rpx 0 ' + box_shadow_Color}]">
					<image lazy-load="true" @tap="toDetailPage({index: index})" class="award-image" :src="item.img">
					</image>
					<view class="text-ellipsis" style="color: #E37012;">{{item.name}}</view>
				</view>


				<view class="btn-start" :class="isRunning?'ative':''" @click="startFunc">开始</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			availableSurplusNum: {
				type: Number,
				default: 0
			},
			themeColor: {
				type: String,
				default: '#33CCCC',
			},
			bgColor: {
				type: String,
				default: '#1E90FF',
			},
			bg_sd_Color: {
				type: String,
				default: '#4169E1',
			},
			height: {
				type: Number,
				default: 676
			},
			width: {
				type: Number,
				default: 664
			},
			//跑马灯启用图片背景
			is_img_bg: {
				type: Boolean,
				default: false
			},
			//背景图片
			theme_img_bg: {
				type: String,
				default: '',
			},
			box_shadow_Color: {
				type: String,
				default: '#f0f0ee',
			},
			//底部背景图片
			bg_img: {
				type: String,
				default: '',
			},
			//停留位置
			stay_index: {
				type: Number,
				default: 1
			},
		},
		data() {
			return {
				dotList: 24, //圆点个数
				//奖品
				indexSelect: 0, //抽中的奖品下标
				isRunning: false //抽中状态
			}
		},
		computed: {
			style_box() {
				let that = this;
				var height = parseInt(that.height);
				var width = parseInt(that.width);
				var style = '';
				if (height > 0) {
					style = `height:${height}rpx;`;
				}
				if (width > 0) {
					style += `width:${width}rpx;`;
				}
				style += `background-color:${that.bgColor};`;

				if (that.is_img_bg && that.bg_img.length > 0) {
					style += `background-image:url(${that.bg_img});`;
				}

				style += `box-shadow: 0 10px 0  ${that.bg_sd_Color};`;
				return style;
			},
			style_box_in() {
				let that = this;
				var height = parseInt(that.height);
				var width = parseInt(that.width);
				var style = '';
				if (height > 68) {
					style = `height:${height - 68}rpx;`;
				}
				if (width > 56) {
					style += `width:${width - 56}rpx;`;
				}

				style += `background-color:${that.themeColor};`;

				var theme_img_bg = that.theme_img_bg;
				if (that.is_img_bg && theme_img_bg.length > 0) {
					style += `background-image:url(${that.theme_img_bg});`;
				}
				return style;
			},

		},
		methods: {
			//详情页
			toDetailPage(item) {
				let that = this;
				let list = that.list;
				let index = item.index;
				let data = {
					curIndex: index,
					item: list[index],
					list: list
				};
				this.$emit('toDetailPage', data);
			},
			//随机数
			random(u) {
				let rnd = Math.random() > 0.5 ? "2" : "1";
				u = u || 3;
				for (var i = 0; i < u; i++) {
					rnd += Math.floor(Math.random() * 10);
				}
				return Number(rnd);
			},
			startFunc() {
				this.$emit('startFunc')
			},
			//开始
			start() {
				let that = this;
				if (this.isRunning) return
				// if (this.availableSurplusNum <= 0) {
				// 	this.$emit('Recharge');
				// 	return
				// }
				this.isRunning = true;
				let indexSelect = 0;
				let i = 0;
				let randomNum = this.random(3);
				let timer = setInterval(() => {
					++indexSelect;
					//这里用y=30*x+150函数做的处理.可根据自己的需求改变转盘速度
					indexSelect = indexSelect % 8;
					this.indexSelect = indexSelect;


					i += 40;
					//console.log(i)
					if (i > randomNum) {

						//去除循环

						//控制停留位置
						indexSelect = that.stay_index;
						this.indexSelect = indexSelect;

						// console.log(randomNum)
						// console.log(indexSelect)
						// console.log(JSON.stringify(that.list[indexSelect]) )

						clearInterval(timer)
						timer = null;
						let data = {
							curIndex: indexSelect,
							item: that.list[indexSelect],
							list: that.list
						};
						this.$emit('result', data);
						this.isRunning = false

					}
				}, (70 + i))
			}
		}
	}
</script>

<style lang="scss">
	.box-ly-pm {
		margin: 0 auto;
		border-radius: 25rpx;
		position: relative;
	}

	.box-in {
		border-radius: 40rpx;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;

		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	/**小圆点 start*/

	.dot {
		position: absolute;
		display: block;
		border-radius: 50%;
		height: 16rpx;
		width: 16rpx;
	}

	.dot:nth-child(odd) {
		background: #fff;
		animation: 0.5s odd linear infinite;
	}

	.dot:nth-child(even) {
		background: #FDF1AE;
		animation: 0.5s even linear infinite;
	}

	.dot-1 {
		left: 43rpx;
		top: 9rpx;
	}

	.dot-2 {
		left: 153rpx;
		top: 9rpx;
	}

	.dot-3 {
		left: 262rpx;
		top: 9rpx;
	}

	.dot-4 {
		left: 372rpx;
		top: 9rpx;
	}

	.dot-5 {
		left: 481rpx;
		top: 9rpx;
	}

	.dot-6 {
		left: 591rpx;
		top: 9rpx;
	}

	.dot-7 {
		left: 642rpx;
		top: 76rpx;
	}

	.dot-8 {
		left: 642rpx;
		top: 178rpx;
	}

	.dot-9 {
		left: 642rpx;
		top: 280rpx;
	}

	.dot-10 {
		left: 642rpx;
		top: 383rpx;
	}

	.dot-11 {
		left: 642rpx;
		top: 485rpx;
	}

	.dot-12 {
		left: 642rpx;
		top: 587rpx;
	}

	.dot-13 {
		left: 591rpx;
		top: 651rpx;
	}

	.dot-14 {
		left: 481rpx;
		top: 651rpx;
	}

	.dot-15 {
		left: 372rpx;
		top: 651rpx;
	}

	.dot-16 {
		left: 262rpx;
		top: 651rpx;
	}

	.dot-17 {
		left: 153rpx;
		top: 651rpx;
	}

	.dot-18 {
		left: 43rpx;
		top: 651rpx;
	}

	.dot-19 {
		left: 6rpx;
		top: 588rpx;
	}

	.dot-20 {
		left: 6rpx;
		top: 486rpx;
	}

	.dot-21 {
		left: 6rpx;
		top: 383rpx;
	}

	.dot-22 {
		left: 6rpx;
		top: 280rpx;
	}

	.dot-23 {
		left: 6rpx;
		top: 178rpx;
	}

	.dot-24 {
		left: 6rpx;
		top: 76rpx;
	}

	@-webkit-keyframes odd {
		0% {
			background: #fff;
			box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(195, 117, 41, 0.35), 0rpx 3rpx 7rpx 0rpx rgba(249, 233, 222, 0.35);
		}

		100% {
			background: #FFE211;
			box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(233, 164, 108, 0.35), 0rpx 3rpx 7rpx 0rpx rgba(255, 226, 17, 0.35);
		}
	}

	@keyframes odd {
		0% {
			background: #fff;
			box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(195, 117, 41, 0.35), 0rpx 3rpx 7rpx 0rpx rgba(249, 233, 222, 0.35);
		}

		100% {
			background: #FFE211;
			box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(233, 164, 108, 0.35), 0rpx 3rpx 7rpx 0rpx rgba(255, 226, 17, 0.35);
		}
	}

	@-webkit-keyframes even {
		0% {
			background: #FFE211;
			box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(233, 164, 108, 0.35), 0rpx 3rpx 7rpx 0rpx rgba(255, 226, 17, 0.35);
		}

		100% {
			background: #fff;
			box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(195, 117, 41, 0.35), 0rpx 3rpx 7rpx 0rpx rgba(249, 233, 222, 0.35);
		}
	}

	@keyframes even {
		0% {
			background: #FFE211;
			box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(233, 164, 108, 0.35), 0rpx 3rpx 7rpx 0rpx rgba(255, 226, 17, 0.35);
		}

		100% {
			background: #fff;
			box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(195, 117, 41, 0.35), 0rpx 3rpx 7rpx 0rpx rgba(249, 233, 222, 0.35);
		}
	}

	/**小圆点 end*/

	.ct-out {
		position: absolute;
		width: 182rpx;
		height: 168rpx;
		background-color: #fff;
		border-radius: 35rpx;
		box-shadow: 0 14rpx 0 #f0f0ee;

		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 0 15rpx;
		box-sizing: border-box;
	}

	/* 580 530  */

	.award-1 {
		left: 18rpx;
		top: 19rpx;
	}

	.award-2 {
		left: 212rpx;
		top: 19rpx;
	}

	.award-3 {
		left: 408rpx;
		top: 19rpx;
	}

	.award-4 {
		left: 408rpx;
		top: 212rpx;
	}

	.award-5 {
		left: 408rpx;
		top: 404rpx;
	}

	.award-6 {
		left: 212rpx;
		top: 404rpx;
	}

	.award-7 {
		left: 18rpx;
		top: 404rpx;
	}

	.award-8 {
		left: 18rpx;
		top: 212rpx;
	}

	/**居中 加粗*/

	.btn-start {
		position: absolute;
		top: 212rpx;
		left: 212rpx;
		border-radius: 35rpx;
		width: 182rpx;
		height: 168rpx;
		background-color: #f62e12;
		background: linear-gradient(0deg, #ff6c4b 0%, #f93b24 53%, #fd645a 99%);
		// box-shadow: 0 4px 0 #fcc8d0;
		color: #fff;
		text-align: center;
		font-size: 48rpx;
		font-weight: bold;
		line-height: 168rpx;
		box-shadow: #F62E12 0px 14rpx 0px;
	}

	.ative {
		// opacity: 0.6 !important;
	}

	.award-image {
		// position: absolute;
		// margin: auto;
		// top: 0;
		// left: 0;
		// bottom: 0;
		// right: 0;
		height: 104rpx;
		width: 104rpx;
		border-radius: 15rpx;
	}

	.awardSelect {
		background-color: #FFFFD9 !important;
		box-shadow: 0 14rpx 0 #f0b257 !important;
	}
</style>